<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的音乐页面</title>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/element.js"></script>
		<script src="../../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" href="../../../css/menus/mySong/mySong.css">
	</head>
	<body>
		<div id="app">
			<!-- 头部歌手信息 -->
			<div class="header">
				<!-- 专辑图片 -->
				<span class="img">
					<img :src="user.img">
				</span>
				<span class="userInfo">
					<!-- 用户昵称 -->
					<div class="userName">
						<h1>{{user.nickName}}</h1>
					</div>
					<!-- 简介 -->
					<div class="userRemarks">
						<div class="remarks" v-if="user.remarks==null||user.remarks==''">一句话介绍下自己吧</div>
						<div class="remarks" v-else>{{user.remarks}}</div>
					</div>
					<!-- 粉丝数、关注 -->
					<div class="userOther">
						<span class="fan">粉丝：<span class="fanCount">7</span></span>&nbsp;&nbsp;&nbsp;
						<span class="care">关注：<span class="careCount">44</span></span>
					</div>
				</span>
			</div>
			<div class="main">
				<div class="main-header">
					<span class="nav1" @click="navChange(1)">我喜欢</span>
					<span class="nav2" @click="navChange(2)">歌单({{user.sheetCount}})</span>
					<span id="hr"></span>
				</div>
				<div class="iframDiv">
					<iframe id="userIframe" :src="navUrl" frameborder="0">
						
					</iframe>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					url: '', //本页面的 url
					user: '', //歌手信息
					// 菜单
					navUrl: 'love.html', //菜单指向的地址
					currentIndex: -1
				}
			},
			mounted() { // 生命周期函数
				this.getUserInfo()
				window.getIndexCurrentIndex = this.getIndexCurrentIndex
				window.getUserInfo1 = this.getUserInfo
			},
			methods: {
				// 菜单选中为其添加样式
				navChange(navId) {
					console.log(navId)
					// 1、先去掉选择中的样式
					const navsDocument = document.querySelectorAll('.main-header span')
					for (var i = 0; i < navsDocument.length; i++) {
						navsDocument[i].style.color = '#000000'
					}
					this.navUrl = ''

					const hrDocument = document.querySelector('#hr')
					// 2、判断用户选中的是哪一个，加上样式
					if (navId == 1) {
						const nav1Document = document.querySelector('.nav1')
						nav1Document.style.color = '#FC6C62'
						hrDocument.style.left = '20px'
						this.navUrl = 'love.html'
					} else if (navId == 2) {
						const nav1Document = document.querySelector('.nav2')
						nav1Document.style.color = '#FC6C62'
						hrDocument.style.left = '165px'
						this.navUrl = 'sheet.html'
					} 
				},
				// 根据 token 查找登录用户信息
				getUserInfo() {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/getUserInfo',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.user = res.data.data.userInfo
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 获取父页面正在播放的下标
				getIndexCurrentIndex(currentIndex) {
					// 调用子页面方法将，正在播放歌曲下标传给子页面
					var iframeDocument = document.getElementById("userIframe")
					iframeDocument.contentWindow.getMySongCurrentIndex(currentIndex)
					// iframeDocument.contentWindow.getIndexCurrentIndex(currentIndex)
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
			},
		})
	</script>
</html>
